<template>
  <div class="login-container">
    <el-card class="box-card">
      <h2 class="title">登录</h2>
      <div class="forminput">
        <el-input v-model="username" placeholder="请输入用户名"></el-input>
      </div>
      <div class="forminput">
        <el-input type="password" v-model="password" placeholder="请输入密码"></el-input>
      </div>
      <div class="forminput">
        <el-button type="primary" @click="handleLogin" :loading="loading">登录</el-button>
      </div>
      <div @click="goToRegister" class="tips">没有账号？去注册</div>

    </el-card>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
import router from '@/router';
import service from '@/utils/request';

const username = ref("")
const password = ref("")
const validatePhone = () => {

  const regex = /^1[3-9]\d{9}$/; // 中国大陆手机号正则，以1开头，第二位3-9，后面是9位数字
  return regex.test(telephone.value);
}

const loading = ref(false);

const handleLogin = async () => {
  loading.value = true;
  if (password.value == '') {
    ElMessage({
      message: '请输入密码',
      type: 'warning',
    })
    return

  }
  if (username.value == '') {
    ElMessage({
      message: '请输入用户名',
      type: 'warning',
    })
    return

  }
  // if (validatePhone() == false) {
  //   ElMessage({
  //     message: '手机号格式不正确',
  //     type: 'warning',
  //   })
  //   return


  // }

  const res = await service.post("/api/admin/login", {
  
      username: username.value,
      password: password.value,
      code:"",
      uuid:""

    
  })
  if(res.code == 200){
    loading.value = false;
  ElMessage.success('登录成功！');
  router.push({
    path: "/index"
  })
  window.localStorage.setItem("userinfo",JSON.stringify(res.data))
  }else{
    ElMessage.warning(res.message);    
  }
  console.log(res)
 
  // 这里可以加入实际的登录逻辑

};

const goToRegister = () => {
  router.push({
    path: "/register"
  })
  // window.location.href = '/register';
};


</script>

<style scoped>
.forminput {
  margin-bottom: 10px;
}

.tips {
  width: 100%;
  text-align: right;
  font-size: 14px;
  cursor: pointer;
}

.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  background: url('../assets/bg.png') no-repeat center center fixed;
  background-size: cover;
}

.box-card {
  width: 360px;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  background-color: rgba(255, 255, 255, 0.9);
}

.title {
  text-align: center;
  margin-bottom: 20px;
  color: #303133;
}

.login-form {
  width: 100%;
}

.el-form-item__label {
  color: #303133;
}

.el-input {
  width: 100%;
}

.el-button {
  width: 100%;
}

.el-link {
  display: block;
  text-align: center;
}
</style>